<template>
  <view class="page custom-page">
    <custom-head gradient back title="学生管理">
      <view class="tool" slot="right">
        <i class="iconfont icon-fenlei fenlei" @click="enterBatchAdd"></i>
      </view>
    </custom-head>
    <view class="search flex a-center">
      <view class="search-input">
        <i class="iconfont icon-sousuo1"></i>
        <input type="search" confirm-type="search" placeholder="请输入学号/姓名" v-model="searchName"/>
      </view>
      <view class="submit"  @click="handleSearch">搜索</view>
    </view>
    <view class="student">
    
      <scroll-view :scroll-y="true" :scroll-top="scrollTop" style="height: 100%;">
        <!-- 删掉了，下滑加载更多 -->
      <!-- <scroll-view :scroll-y="true" :scroll-top="scrollTop"  @scrolltolower="bottomOut" style="height: 100%;"> -->

      <u-index-list v-if="indexList.length > 0" :scrollTop="scrollTop" :sticky="false" :index-list="indexList" >
          <view v-for="(item, index) in indexList" :key="index">
            <u-index-anchor :index="item" />
            <view
              class="student-item flex a-center"
              v-for="student in studentList[item]"
              @tap="enter('/pages/student/information', student.id)"
            >
              <view class="touxiang">
                <image :src="student.avatar" />
              </view>
              <view class="info">
                <view class="title"
                  >{{ student.name }} <span>（学号{{ student.student_number }}）</span>
                </view>
                <view class="text flex a-center">
                  <span>{{ schoolName }}</span>
                  <view class="integral">积分: {{ student.integration }}</view>
                </view>
              </view>
            </view>
          </view>

          </u-index-list>
          <view v-else class="noData">暂无数据</view>
        </scroll-view>
        
      <view class="submit-box flex a-center j-center">
        <view class="addStudent submit" @click="enterAdd()">添加学生信息</view>
      </view>
      <!-- <u-action-sheet cancelText="取消" :list="list" v-model="show" @click="enterPage"></u-action-sheet> -->
    </view>
  </view>
</template>
<script>
import { getStudent } from '../../api/modules/student'
import { textToPy, pinyinSort } from '../../utils/index'

export default {
  data() {
    return {
      searchName: '',
      scrollTop: 0,
      // show: false,
      // list: [
      //   { text: '添加学员信息', path: '/pages/student/addition' },
      //   { text: '批量添加学员信息', path: '/pages/student/batchAddition' }
      // ],
      indexList: [],
      studentList: [],
      initStudentList: [],  // 获取接口返回的初始数据

      page_no:1 ,  // 默认加载第一页
      page_size:20 ,  // 每页加载 20条数据
      total: 0, // 一共有多少条数据 
      static_uri: getApp().globalData.glb_list.config.static_uri, // 获取全局配置文件
      schoolName: getApp().globalData.school.name
    }
  },
  onShow(){
    // this._glbgetStudent();
    this._getStudent({
        page_no: 1,
        page_size: 10000
    })

    console.log('--', getApp().globalData.school.name)
  },

  // mounted() {
  //   this._getStudent({
  //       page_no: 1,
  //       page_size: 10000
  //   })

  //   // this._glbgetStudent();
  // },

  methods: {
    _glbgetStudent() {
      // console.log('当前页面 students 的数据',this.glbSchool.students)
      this.initStudentList = this.glbSchool.students
      const tempArr = pinyinSort(this.glbSchool.students)

      this.studentList = tempArr
      this.indexList = Object.keys(tempArr)
    },

    // bottomOut(e) {
    //   // console.log('--', this.page_no)
    //   if (this.page_no < Math.ceil(this.total / this.page_size)) {
    //     this.page_no+=1;
    //     // console.log('---', this.page_no)

    //     getStudent({
    //       page_no: this.page_no,
    //       page_size: 20
    //     }).then((res) => {
    //       const { code, data } = res || {};

    //       if(code === 200) {
    //         const list = ([] && data.list).map((item) => ({ ...item, pname: textToPy(item.name), avatar: `${this.static_uri}${item.avatar}` }));
    //         this.initStudentList.push(...list);
    //         const tempArr = pinyinSort(this.initStudentList)
    //         this.studentList = tempArr
    //         this.indexList = Object.keys(tempArr)
    //       }
    //     })
    //   }
    // },


    handleSearch() {
      if (!this.searchName) {
        // this._glbgetStudent();
        this._getStudent({
            page_no: 1,
            page_size: 10000
        })
        return;
      }

      let backList = [];

      this.getSearchItem(this.initStudentList, backList, this.searchName)
      this.studentList = pinyinSort(backList);
      this.indexList = Object.keys(pinyinSort(backList))
    },

    getSearchItem(arr, backList, param) { // 拿到input 处理好的数据
      for(const item of arr) {
        if (Array.isArray(item)) {
          this.getSearchItem(item, backList, param)
        } else {
          if (item && item.name === param) {
            backList.push(item)
          } else if(item && item.student_number === param) {
            backList.push(item)
          }
        }
      }
    },

    enter(path, id) {
      uni.navigateTo({
        url: `${path}?id=${id}`
      })
    },

    enterAdd() {
      uni.navigateTo({
        url: '/pages/student/addition'
      })
    },
    enterBatchAdd() {  // 批量添加
      uni.navigateTo({
        url: '/pages/student/batchAddition'
      })
    },

    enterPage(e) {
      var path = this.list[e].path
      uni.navigateTo({
        url: path
      })
    },

    _getStudent(data) {
      getStudent(data).then((res) => {
        if (res.code === 200) {
          const list = res.data.list.map((item) => ({ ...item, pname: textToPy(item.name), avatar: `${this.static_uri}${item.avatar}` })).filter(i => i.sid === this.glbId)

          this.initStudentList = list
          const tempArr = pinyinSort(list)

          this.studentList = tempArr
          this.indexList = Object.keys(tempArr)
          this.total = res.data.total;
        }
      })
    }
  },

  onPageScroll(e) {
    this.scrollTop = e.scrollTop - 114
  }
}
</script>
<style scoped lang="scss">
.fenlei {
  color: #fff;
  font-size: 50rpx;
}

.page {
  height: 100vh;
  background-color: #fff;
}
.student {
  background-color: #fff;
  position: relative;
  padding-bottom: 100rpx;
  margin-top: 114rpx;
  height: calc(100% - 114rpx);
}

.noData {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 120rpx;
  width: 100%;
}

.search {
  width: 100%;
  height: 114rpx;
  background-color: #f3f4f5;
  padding: 25rpx 30rpx;
  position: fixed;
  top: calc(44px + var(--status-bar-height));
  z-index: 2;
  left: 0;

  .submit {
    font-size: 24rpx;
    color: #303133;
    padding: 0 30rpx;
    line-height: 64rpx;
  }
}

.search-input {
  flex: 1;
  background-color: #fff;
  height: 64rpx;
  border-radius: 32rpx;
  position: relative;

  input {
    font-size: 24rpx;
    color: #666;
    line-height: 64rpx;
    outline: none;
    background: none;
    height: 64rpx;
    padding-left: 60rpx;
  }

  i {
    position: absolute;
    left: 15rpx;
    top: 50%;
    transform: translateY(-50%);
    font-size: 36rpx;
    color: #8f9399;
  }
}

.studentList {
  height: 100%;
  width: 100%;
  overflow: hidden;
}

.student-item {
  width: 100%;
  padding: 10rpx 20rpx;

  .touxiang {
    width: 120rpx !important;
    height: 120rpx;
    border-radius: 50% !important;
    overflow: hidden;
    margin-right: 30rpx;
  }

  .touxiang image {
    width: 100%;
    height: 100%;
  }

  .info {
    flex: 1;

    .title {
      font-size: 32rpx;
      color: #303133;
      margin-bottom: 10rpx;
    }

    .title span {
      font-size: 24rpx;
    }

    .text {
      font-size: 24rpx;
      color: #303133;
    }

    .integral {
      margin-left: 65rpx;
      color: #2979ff;
      font-size: 24rpx;
      margin-top: 10rpx;
    }
  }
}
.submit-box {
  position: fixed;
  height: 100rpx;
  background-color: #fff;
  width: 100%;
  left: 0;
  bottom: 0;
  z-index: 8;
}
.addStudent {
  width: 686rpx;
  height: 88rpx;
  border-radius: 44rpx;
  background-color: #2979ff;
  color: #fff;
  font-size: 32rpx;
  text-align: center;
  line-height: 88rpx;
}
</style>
